<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElButton, ElTableColumn, ElTable } from 'element-plus';


//组件
import Limit from '@/views/content/util/limit.vue'
import { res } from '@/pojo/dto/res'
import IButton from "@/views/content/util/button/iButton.vue"
import OButton from "@/views/content/util/button/oButton.vue"
import { tableTypeListVO } from '@/pojo/vo/tableTypeListVO'
import { getTableTypeListApi } from '@/apis/tableApi'

const itemList = ref<Array<tableTypeListVO>>([])



const limitItemList = ref<Array<tableTypeListVO>>([])
const getLimitItemList = (displayedItemList: Array<tableTypeListVO>) => {
    limitItemList.value = displayedItemList
}

const getTableTypeList = async () => {
    const res: res = await getTableTypeListApi()
    itemList.value = res.data
    itemList.value = itemList.value.map(row => {
        return {
            ...row,
            isUse: row.isUse === 1 ? true : false
        };
    })

}


const tableTypeSelectList = ref<Array<tableTypeListVO>>([])
const tableType = ref('全部')
onMounted(() => {
    getTableTypeList()

})
</script>


<template>
    <div>
        <div>
            <span>
                <IButton title="添加桌类" @click="" />
                <ElButton type="warning" plain @click="">批量删除</ElButton>
            </span>
            <span style="margin-left: 20px;">
                <el-select v-model="tableType" placeholder="请选择" style="width: 240px">
                    <el-option value="全部"></el-option>
                    <el-option v-for="item in tableTypeSelectList" :value="item.name" />
                </el-select>
            </span>


        </div>

        <div style="margin-top: 20px;">
            <el-table :data="limitItemList" stripe
                :header-cell-style="{ background: 'rgb(243, 243, 243)', color: '#606266' }" :scrollbar-always-on=false
                style="width: 94%;height: 100%;">
                <el-table-column type="selection" width="30px">
                </el-table-column>
                <el-table-column label="id" prop="id"></el-table-column>
                <el-table-column label="排序" prop="sort"></el-table-column>
                <el-table-column label="桌位类型" prop="name">
                    <template #default="props">

                        <div v-if="props.row.name === '小桌'" > <el-tag type="success">
                                {{ props.row.name }}</el-tag></div>
                        <div v-if="props.row.name === '中桌'" > <el-tag type="warning">
                                {{ props.row.name}}</el-tag></div>
                        <div v-if="props.row.name === '大桌'" > <el-tag type="danger"> {{
                            props.row.name }}</el-tag></div>

                    </template>
                </el-table-column>
                <el-table-column label="桌位编号" prop="name"></el-table-column>

                <el-table-column label="人数区间">
                    <template #default="props">
                        <label>{{ props.row.minPeople }}</label>
                        <label>~</label>
                        <label>{{ props.row.maxPeople }}人</label>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="isUse">
                    <template #default="{ row }">
                        <el-switch v-model="row.isUse" />
                    </template>
                </el-table-column>
               
                <el-table-column label="操作">
                    <OButton type="edit" />
                    <OButton type="del" />
                </el-table-column>


            </el-table>
        </div>


        <Limit :item-list="itemList" @update-item-list="getLimitItemList"></Limit>
    </div>
</template>

<style lang="scss" scoped>
.table-link {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
</style>